<template>
  <div>
    <a-modal
      :title="formState.id?'编辑技术职称':'新增技术职称'"
      :visible="increaseVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="70%"
      :footer="false"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="form-technicalTitle-Lu"
      @cancel="closeVisible"
      >
      <!--:title="formState.id?'编辑技术职称':'新增技术职称'"  -->
      <div>
        <a-form class="personal-info-form" :form="form" v-if="increaseVisible" :key="formKey">
          <a-descriptions bordered style="width: 100%;" :column="2" class="descriptions-yearPlan">
            <a-descriptions-item>
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" v-if="!isView">*</span>
                    序号
                </span>
                <a-form-item ref="forder" prop="forder">
                  <span v-if="isView">{{ formState.forder }}</span>
                  <a-input-number v-else placeholder="请输入序号" v-model="formState.forder"
                          style="width: 100% !important"
                          v-decorator="[ 'forder', {initialValue:formState.forder,rules: rules.forder}]"/>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" v-if="!isView">*</span>
                    专业技术资格
                </span>
                <a-form-item ref="fzyjszg" prop="fzyjszg">
                    <span v-if="isView">{{ formState.fzyjszg }}</span>
                    <a-input v-else placeholder="请输入专业技术资格" v-model="formState.fzyjszg"
                          v-decorator="[ 'fzyjszg', {initialValue:formState.fzyjszg,rules: rules.fzyjszg}]"/>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" v-if="!isView">*</span>
                    职称系列类型1
                </span>
                <a-form-item ref="fzcxllx1" prop="fzcxllx1">
                  <span v-if="isView">{{ formState.fzcxllx1 }}</span>
                  <a-input v-else placeholder="请输入职称系列类型1" v-model="formState.fzcxllx1"
                          v-decorator="[ 'fzcxllx1', {initialValue:formState.fzcxllx1,rules: rules.fzcxllx1}]"/>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" v-if="!isView">*</span>
                    职称系列类型2
                </span>
                <a-form-item ref="fzcxllx2" prop="fzcxllx2">
                    <span v-if="isView">{{ formState.fzcxllx2 }}</span>
                    <a-input v-else placeholder="请输入职称系列类型2" v-model="formState.fzcxllx2"
                          v-decorator="[ 'fzcxllx2', {initialValue:formState.fzcxllx2,rules: rules.fzcxllx2}]"/>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
                <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" v-if="!isView">*</span>
                  级别
                </span>
                <a-form-item ref="fjb" prop="fjb">
                    <span v-if="isView">{{ formState.fjb }}</span>
                    <compSelector
                      v-else
                      :defaultValue="formState.fjb"
                      :compType="typeSelect"
                      dictionaryType="职称"
                      placeholder=""
                      @selectHandleChange="fjbChange"
                      v-decorator="[ 'fjb', {initialValue:formState.fjb,rules:rules.fjb}]"/>
                </a-form-item>
            </a-descriptions-item>
          </a-descriptions>
          <div v-if="!isView" style="text-align: center;padding: 10px;">
            <a-button @click="closeVisible">取消</a-button>
            <a-button class="blue-btn" style="margin-left: 10px;" @click="subHandle">提交</a-button>
          </div>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector'
import {typeSelect, typeCheckbox, } from '@/components/compSearchCriteria/ContractType'
import { addTitle,editTitle} from './service/index'
export default {
  components:{
    compSelector
  },
  data() {
    return {
      increaseVisible: false,
      isView: false,
      form: this.$form.createForm(this, { name: 'cform' }),
      formState: {},
      formKey: null,
      rules:{
        fzcxllx1: [{
            required: true,
            message: '请输入职称系列类型1',
            trigger: 'blur',
        }],
        fzcxllx2: [{
            required: true,
            message: '请输入职称系列类型2',
            trigger: 'blur',
        }],
        forder: [{
            type: 'number',
            required: true,
            message: '请输入序号',
            trigger: 'blur',
        }],
        fzyjszg: [{
            required: true,
            message: '请输入专业技术资格',
            trigger: 'blur',
        }],
        fjb: [{
            required: true,
            message: '请选择级别',
            trigger: 'blur',
        }],
      },
      typeSelect:typeSelect,
      typeCheckbox:typeCheckbox,
    }
  },
  methods: {
    getData(val,isview){
      this.isView = isview
      //console.log(val,isview)
      if(val.id){
        this.formState = val
        this.form.setFieldsValue({
          fjb: val.fjb,
        });
        //console.log('111',this.formState.fjb)
        //console.log('222',this.form.fjb)
      } else {
        this.formState = {}
      }
      this.formKey = Date.now()
    },
    closeVisible(){
      this.increaseVisible = false
      this.$emit('success')
    },
    fjbChange(val){
      this.formState.fjb = val
      this.form.setFieldsValue({
        fjb: val,
      });
    },
    subHandle(){
      this.form.validateFields((err, values) => {
        //console.log(err,values)
        if(!err){
          var that = this
          that.$confirm({
            title: that.formState.id?'您确定要编辑当前职称吗': '您确定要添加当前职称吗',
            content: '',
            okText: '确定',
            okType: 'info',
            cancelText: '取消',
            onOk() {
              let data = {
                  id: that.formState.id?that.formState.id:'',
                  forder: that.formState.forder,
                  fzyjszg: that.formState.fzyjszg,
                  fzcxllx1: that.formState.fzcxllx1,
                  fzcxllx2: that.formState.fzcxllx2,
                  fjb: that.formState.fjb,
                }
              if(that.formState.id){
                editTitle(data).then(res => {
                  if(res.success){
                    that.$message.success(res.message)
                    that.closeVisible()
                  } else {
                    that.$message.warning(res.message)
                  }
                })
              } else {
                addTitle(data).then(res => {
                  if(res.success){
                    that.$message.success(res.message)
                    that.closeVisible()
                  } else {
                    that.$message.warning(res.message)
                  }
                })
              }
            },
            onCancel() {
              //console.log('Cancel');
            },
          });
        }
      })
    }
  },
}
</script>
<style lang="less">
  .form-technicalTitle-Lu {
    .ant-form-item {
      margin-bottom: 0px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label{
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        background-color:#e6f7ff;
        width: 150px !important;
        text-align: right;
        font-size: 16px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        padding: 5px 10px !important;

    }
    .descriptions-yearPlan {
        .descriptions-label-slot{
          display: flex;
          align-items: center;
          width: 123px !important;//确保左侧固定文字不会换行
          line-height: 2;
          text-align: center;
          justify-content: center;
      }
    }
    .descriptions-content-item {
        width: 100%;
        .ant-form-item-control-wrapper{
            width: 100%;
        }
      }
    .descriptions-row .descriptions-label-slot{
        display: flex;
        align-items: center;
        width: 100px !important;//确保左侧固定文字不会换行
    }
    .xhText{
        color: #f5222d;
        line-height: 36px;
        font-size: 21px;
        font-weight: 600;
        height: 30px;
    }
  }
</style>
